---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import { ProjectTabs } from '../../../components/Projects/ProjectTabs';
import { ListProjectSolutions } from '../../../components/Projects/ListProjectSolutions';
import { ProjectSolutionModal } from '../../../components/Projects/ProjectSolutionModal';
import { officialProjectDetails } from '../../../queries/official-project';

export const prerender = false;

interface Params extends Record<string, string | undefined> {
  projectId: string;
}

const { projectId } = Astro.params as Params;

const project = await officialProjectDetails(projectId);
if (!project) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
  return Astro.rewrite('/404');
}

const parentRoadmapId = project?.roadmapIds?.[0] || '';
---

<BaseLayout
  permalink={`/projects/${projectId}/solutions`}
  title={project?.seo?.title || project.title}
  briefTitle={project.title}
  description={project.seo.description || project.description}
  keywords={project.seo.keywords}
  resourceId={projectId}
>
  <div class='bg-gray-50'>
    <div class='container'>
      <ProjectTabs
        parentRoadmapId={parentRoadmapId}
        projectId={projectId}
        activeTab='solutions'
      />

      <ListProjectSolutions
        project={project}
        projectId={projectId}
        client:load
      />

      <ProjectSolutionModal
        projectId={projectId}
        projectTitle={project.title}
        projectDescription={project.description}
        client:only='react'
      />
    </div>
  </div>
</BaseLayout>
